<template>
    <view>
        <wuc-tab :tab-list="tabList" :tabCur="TabCur" @change="tabChange" tab-class="text-center text-black bg-white" select-class="text-blue"></wuc-tab>
        <swiper :current="TabCur" class="swiper" duration="300" :circular="true" indicator-color="rgba(255,255,255,0)"  :style="{height:swiperHeight+'px'}" indicator-active-color="rgba(255,255,255,0)" @change="swiperChange">
            <swiper-item v-for="(item,index) in tabList" :key="index">
                <uni-list>
                    <evaluationListItem></evaluationListItem>
                    <evaluationListItem></evaluationListItem>
                    <evaluationListItem></evaluationListItem>
                    <evaluationListItem></evaluationListItem>
                    <evaluationListItem></evaluationListItem>
                </uni-list>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    import WucTab from '@/components/wuc-tab.vue';
    import evaluationListItem from '../../customComponent/evaluationListItem.vue';
    import uniList from '@/components/uni-list/uni-list.vue'

    export default {
        name: "scenicEvaluation",
        components: {
            WucTab,
            evaluationListItem,
            uniList
        },
        data() {
            return {
                TabCur: 0,
                tabList: [{name: '全部'}, {name: '满意'}, {name: '一般'}, {name: '不满意'}],
                swiperHeight: 0,  //外部的高度
            }
        },

        mounted() {
            this.getElementHeight(".uni-list")
        },
        methods: {

            tabChange(index) {
                this.TabCur = index;
            },
            swiperChange(e) {
                let {current} = e.target;
                this.TabCur = current;
            },

            getElementHeight(element) {
                setTimeout(() => {
                    let query = uni.createSelectorQuery().in(this);
                    query.select(element).boundingClientRect();
                    query.exec((res) => {
                        if (!res) {//如果没获取到，再调一次
                            this.getElementHeight();
                        } else {
                            this.swiperHeight = res[0].height;
                        }
                    })
                }, 20)
            },
        }
    }
</script>

<style scoped>

</style>
